import {Button, DatePicker, Form, Input, Modal, Select, Table} from 'antd';
import React from 'react'
import SearchParam from "components/searchParam";
import TablePage from "components/tablePage";
import {useQuery} from "react-query";
import {useMount, useObjectState} from "utils";
import Buttons from "components/noBorderButton";
import {clearObject, filterObject, initPageConfig as initPageConfigs, removeObject} from "utils/utils";
import {getRecord, getVisitors} from 'api/order'
import {typeObject} from 'types'
import {getGraciousness} from 'api/venue'

const initPageConfig = {...initPageConfigs, status: 0}
export default function Order() {
    const [pageConfig, setPageConfig] = useObjectState(initPageConfig)
    const [pageValues, setPageValues] = useObjectState({
        total: 0,
        detailModal: false,
        detailMessage: [],
        selectVenueList: [],
        times: ['', '']
    })
    const {data, isLoading} = useQuery(['venueList', pageConfig], async () => {
        const {data: res} = await getRecord({...removeObject(pageConfig, filterObject(pageConfig))})
        setPageValues({total: Number(res.total)})
        return res.records
    })
    const onSubmit = (value: object) => {
        console.log(value)
        const {times} = pageValues
        setPageConfig({
            ...value, ...{
                bigTime: times[0],
                endTime: times[1]
            }, page: 1
        })
    }

    const pagination = {
        current: pageConfig.page,
        pageSize: pageConfig.pageSize,
        total: pageValues.total,
        onChange: (v: number, t: number) => {
            setPageConfig({
                page: v,
                pageSize: t
            })
        }
    }
    const onReset = () => {
        setPageConfig({...clearObject(pageConfig), ...initPageConfig})
    }

    const detailClick = async (id: string) => {
        const res = await getVisitors(id)
        setPageValues({detailMessage: res.data})
        changeDetailModal(true)
    }
    const changeDetailModal = (open: Boolean) => {setPageValues({detailModal: open})}
    useMount(() => {
        getGraciousness({
            page: 1,
            pageSize: 1000
        }).then(res => {
            setPageValues({selectVenueList: res.data.records})
        })
    })
    const onChange: (dates: any, dateStrings: [string, string]) => void = (date, dateString) => {
        setPageValues({times: dateString})
    };
    const columns = [
        {
            title: '预约时段',
            dataIndex: 'timeTitle'
        },
        {
            title: '门票套餐及游客信息',
            dataIndex: 'detail',
            render: (_: any, {id}: { id: string }) => {
                return <Buttons onClick={() => detailClick(id)}>查看详情</Buttons>
            }
        },
        {
            title: '下单人',
            dataIndex: 'userName'
        },
        {
            title: '联系电话',
            dataIndex: 'contactMobile'
        },
        {
            title: '核销状态',
            dataIndex: 'status',
            render: (_: any, {status}: { status: number }) => {
                return ({
                    1: '未使用',
                    2: '已核销',
                    3: '已失效'
                }[status])
            }
        },
        {
            title: '核销时间',
            dataIndex: 'checkTime',
            render: (_: any, {checkTime}: { checkTime: string }) => {
                return <>{checkTime || '/'}</>
            }
        },
        {
            title: '核销员',
            dataIndex: 'checkUserName'
        },
    ]
    return (
        <div className={'venue'}>
            <SearchParam onReset={onReset} onSubmit={onSubmit} initialValues={{status: 0}}>
                <Form.Item
                    label="预约时间"
                >
                    <DatePicker.RangePicker format={'YYYY-MM-DD HH:mm:ss'} onChange={onChange}/>
                </Form.Item>
                <Form.Item
                    label="文化馆"
                    name="title"
                >
                    <Select
                        showSearch
                        placeholder="请选择文化馆"
                        style={{width: "15rem"}}
                        filterOption={(input, option) =>
                            (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
                        }
                    >
                        {
                            pageValues.selectVenueList.map((item: typeObject) => {
                                return <Select.Option key={item.id} value={item.id}>{item.title}</Select.Option>
                            })
                        }
                    </Select>
                </Form.Item>
                <Form.Item
                    label="核销状态"
                    name="status"
                >
                    <Select
                        showSearch
                        placeholder="请选择状态"
                        style={{width: "15rem"}}
                    >
                        {
                            selectStatus.map((item: typeObject) => {
                                return <Select.Option key={item.value} value={item.value}>{item.label}</Select.Option>
                            })
                        }
                    </Select>
                </Form.Item>
                <Form.Item
                    label="下单人"
                    name="userName"
                >
                    <Input placeholder="请输入下单人名称"/>
                </Form.Item>
            </SearchParam>
            <TablePage
                loading={isLoading}
                columns={columns}
                dataSource={data}
                pagination={pagination}
                operations={false}
            >
            </TablePage>
            <Modal
                title="门票套餐及游客信息"
                open={pageValues.detailModal}
                onCancel={() => changeDetailModal(false)}
                closeIcon={null}
                footer={[<Button key="submit" type="primary" onClick={() => changeDetailModal(false)}>
                    确定
                </Button>]}
            >
                <Table rowKey={'id'} columns={modalColumns} dataSource={pageValues.detailMessage} pagination={false}/>
            </Modal>
        </div>
    );
};
const modalColumns = [
    {
        title: '门票套餐',
        dataIndex: 'title'
    }, {
        title: '游客姓名',
        dataIndex: 'visitorsName'
    }, {
        title: '游客身份证号',
        dataIndex: 'visitorsIdnumber'
    },
]
const selectStatus = [
    {
        label: '全部',
        value: 0
    }, {
        label: '未使用',
        value: 1
    },
    {
        label: '已核销',
        value: 2
    },
    {
        label: '已失效',
        value: 3
    }
]
